# Styling any component

`twc` can be used on all your own or third-party components as long as they accept a `className` prop.

## Usage

Sometime you may want to style components from libraries like [Radix](https://www.radix-ui.com/) or [React Aria Components](https://react-spectrum.adobe.com/react-aria/index.html) or your own cooked components.

In this example, we style a `HoverCard` from Radix:

```tsx {4-6,12}
import * as HoverCard from "@radix-ui/react-hover-card";
import { twc } from "react-twc";

const HoverCardContent = twc(
  HoverCard.Content,
)`data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] rounded-md bg-white p-5 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] data-[state=open]:transition-all`;

export default () => (
  <HoverCard.Root>
    <HoverCard.Trigger>Hover me</HoverCard.Trigger>
    <HoverCard.Portal>
      <HoverCardContent>Hello from hover card</HoverCardContent>
    </HoverCard.Portal>
  </HoverCard.Root>
);
```

If you need to specify some default props, you can use [additional props](/docs/guides/additional-props). For example you can define the `sideOffset` by default using `attrs` constructor:

```tsx
const HoverCardContent = twc(HoverCard.Content).attrs({
  sideOffset: 5,
})`data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] rounded-md bg-white p-5 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] data-[state=open]:transition-all`;
```

## Specify props

When you wrap a component with `twc`, it infers the component's props automatically. However, this can sometimes result in unpredictable behavior. In such scenarios, it's better to define the props manually.

For example, with the [`@radix-ui/react-accordion`](https://www.radix-ui.com/primitives/docs/components/accordion#accordion) component, its complex props like `type` and `collapsible` might not be inferred correctly by twc. To prevent issues, explicitly declare these props when using `twc`. This explicit declaration ensures accurate prop handling, avoiding potential problems.

```tsx
import * as React from 'react'
import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { twc } from "react-twc";

const Accordion = twc(AccordionPrimitive.Root)<React.ComponentProps<typeof AccordionPrimitive.Root>>`py-2`;

export default () => {
  return (
    {/* This work without any type error, `collapsible` is authorized when `type="single"` */}
    <Accordion type="single" collapsible>
    </Accordion>
  );
}
```
